<template>
<Modal v-model="modalValue" :title="menuId ? '编辑菜单' : '添加菜单'">
        <div class="add-auth">
        <Form
            ref="addForm"
            :model="form"
            :rules="diyData.rules"
            :label-width="100"
        >
            <FormItem label="类型" prop="type">
                <RadioGroup v-model="form.type">
                    <Radio label="0">
                        <span>目录</span>
                    </Radio>
                    <Radio label="1">
                        <span>菜单</span>
                    </Radio>
                    <Radio label="2">
                        <span>按钮</span>
                    </Radio>
                </RadioGroup>
            </FormItem>
            <FormItem :label="form.type==0?'目录名称':form.type==1?'菜单名称':form.type==2?'按钮名称':'菜单名称'" prop="name">
                <Input clearable 
                    v-model="form.name"
                    :placeholder="form.type==0?'请输入目录名称':form.type==1?'请输入菜单名称':form.type==2?'请输入按钮名称':'请输入菜单名称'"
                ></Input>
            </FormItem>
            <FormItem label="上级菜单" prop="parentId">
                <Select clearable  v-model="form.parentId" >
                    <Option label="顶级菜单" value="0"></Option>
                    <Option v-for="item in apiData.parentList" :value="item.menuId+''" :key="item.menuId">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="菜单路径" prop="url" v-if="form.type!=2">
                <Input clearable 
                    v-model="form.url"
                    placeholder="请输入菜单路径"
                    
                ></Input>
            </FormItem>
            <FormItem label="授权标识" prop="perms"  v-if="form.type!=0">
                <Input clearable 
                    v-model="form.perms"
                    placeholder="请输入授权标识"
                    
                ></Input>
            </FormItem>
            
            <FormItem label="菜单图标" v-if="form.type!=2">
                <Input clearable 
                    v-model="form.icon"
                    placeholder="请输入菜单图标"
                    
                ></Input>
            </FormItem>
            <FormItem label="排序" prop="orderNum" v-if="form.type!=2">
                <Input clearable 
                    v-model="form.orderNum"
                    placeholder="请输入排序"
                    type="text"
                    
                ></Input>
                <div class="tips">*数字越小排序越靠前</div>
            </FormItem>
        </Form>
        </div>
        <div slot="footer">
                <Button
                    type="primary"
                    style="width: 90px; margin-right: 20px"
                    @click="submit"
                >
                    保存
                </Button>
                <Button style="width: 90px" @click="modalCancel()">
                    取消
                </Button>
            </div>
</Modal>
</template>

<script>
import {
    menuSave,menuUpdate,menuInfo,menuSelect
  } from '@/api/system/menu.js'

export default {
    name: '',
    props: {
			value: {
				type: Boolean,
				default: false
			},
            menuId:{
				type: [String, Number],
				default: ''
			},
		},
    data() {
        return {
            query: {},
            search: {},
            diyDom: {},
            // 表单数据
            form: {
                menuId: '',
                name: '',
                orderNum: '',
                parentId: '',
                parentName: '',
                perms: '',
                type: '0',
                url: '',
                icon: ''
            },
            diyData: {
                rules: {
                     type: [{required: true, message: '请选择类型', trigger: 'change'}],
                    name: [{required: true, message: '标题不能为空', trigger: 'blur'}],
                    url: [{required: true, message: '菜单路径不能为空', trigger: 'blur'}],
                    parentId: [{required: true, message: '上级菜单不能为空', trigger: 'change'}],
                    icon: [{required: true, message: '菜单图标不能为空', trigger: 'blur'}]
                }
            },
            apiData: {
                parentList: [],
                authDetails: {}
            }
        };
    },
    methods: {
        // 获取新增或修改的菜单列表
        getDetail() {
            this.$store.commit('setSpinShow', true);
            menuInfo({menuId:this.menuId}).then(res => {
                const {orderNum, menuId, name, parentId, parentName,perms,type,url,icon} = res.data.menu;
                this.form.menuId=menuId
                this.form.name=name
                this.form.orderNum=orderNum
                this.form.parentId=parentId+''
                this.form.parentName=parentName
               this.form.perms=perms
               this.form.type=type+''
                this.form.url=url
                this.form.icon=icon
            }).finally(() => this.$store.commit('setSpinShow', false));
        },
        // 获取菜单列表
        getMenuList() {
            menuSelect().then(res => {
                this.apiData.parentList = this.iteratorMenu(res.data.menuList);
                console.log(this.apiData.parentList)
                // this.apiData.parentList = this.apiData.parentList.map(item => {
                //     return {
                //         ...item
                //     };
                // });
            });
        },
        // 迭代菜单
        iteratorMenu(menu) {
            let target = [];
            menu.forEach(item => {
                if (item.children && item.children.length > 0) {
                    target.push(item);
                    item.children.forEach(citem => {
                        target.push(citem);
                    });
                } else {
                    target.push(item);
                }
            });
            return target;
        },
        submit() {
            this.$refs['addForm'].validate((valid) => {
                if (valid) {
                    const opt = {...this.form};
                   
                    if (this.menuId) {
                         opt.menuId=this.menuId
                        this.$store.commit('setSpinShow', true);
                        menuUpdate(opt).then(
                            (res) => {
                                this.$Message.success(
                                    '编辑成功'
                                );
                                this.$emit('on-success')
								this.modalCancel()
                               
                            }
                        ).finally(() => this.$store.commit('setSpinShow', false));
                    } else {
                        this.$store.commit('setSpinShow', true);
                        menuSave(opt).then(
                            (res) => {
                                this.$Message.success('新增成功');
                                this.$emit('on-success')
								this.modalCancel()
                            }
                        ).finally(() => this.$store.commit('setSpinShow', false));
                    }
                }
            });
        },
        modalCancel() {
				this.$refs['addForm'].resetFields()
				this.$nextTick(() => {
					this.modalValue = false
				})
			},
    },
     computed: {
      modalValue: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    },
    watch: {
      value(val) {
        this.$refs['addForm'].resetFields()
        this.getMenuList();
        console.log(this.menuId,'this.menuId')
        if(this.menuId){
            this.getDetail();
        }
      }
    },
    mounted() {
        // this.query = this.$route.query;
        // 获取菜单列表
        // this.getMenuList();
        // this.query.id && this.getDetail();
    }
};
</script>

<style scoped lang="less">
.add-auth {
  padding-right: 40px;
    .look-img {
        display: flex;
        align-items: center;
        width: 100px;
        height: 100px;
        border: 1px dashed rgba(197, 197, 197, 1);
        text-align: center;
        justify-content: space-evenly;
        position: relative;
        overflow: hidden;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
    }

    .look-img:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        line-height: 98px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
}
</style>
